<template>
  <a-row>
    <a-col :xs="24" :md="0" :span="24" style="height: 0.88rem">
      <header>
        <a-flex justify="space-between" class="nav-wrap">
          <nav>
            <ul class="nav-menu">
              <li>
                <NuxtLink to="/" activeClass="active">
                  <span>首页</span>
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/classify" activeClass="active">
                  <span>分类</span>
                </NuxtLink>
              </li>
            </ul>
          </nav>
          <a-flex class="nav-right">
            <div class="search-icon"><SearchOutlined /></div>
            <a-flex class="language-box" align="center">
              <GlobalOutlined />
              <span>CN</span>
            </a-flex>
          </a-flex>
        </a-flex>
      </header>
    </a-col>
    <a-col :xs="0" :md="24" :span="24">
      <header>
        <a-flex justify="space-between" class="container">
          <a-flex class="nav-wrap">
            <div class="logo"></div>
            <nav>
              <ul>
                <li>
                  <NuxtLink to="/" activeClass="active">
                    <span>首页</span>
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink to="/classify" activeClass="active">
                    <span>分类</span>
                  </NuxtLink>
                </li>
                <li>
                  <a-dropdown
                    :trigger="['click']"
                    :arrow="{ pointAtCenter: true }"
                    placement="top"
                  >
                    <div class="ant-dropdown-link" @click.prevent>
                      {{ configCurryFilter("lang", langValue) }}
                      <DownOutlined />
                    </div>
                    <template #overlay>
                      <ul class="lang-menu">
                        <li
                          v-for="(item, index) in options.lang"
                          :key="index"
                          @click="hangleLang(item.value as string)"
                        >
                          <a href="javascript:;">{{ item.label }}</a>
                        </li>
                      </ul>
                    </template>
                  </a-dropdown>
                </li>
              </ul>
            </nav>
          </a-flex>
          <div class="search">
            <a-input-search
              v-model:value="value"
              placeholder="搜索"
              style="
                width: 200px;
                background-color: hsla(0, 0%, 100%, 0.08);
                border-radius: 50px;
              "
            />
          </div>
        </a-flex>
      </header>
    </a-col>
  </a-row>

  <main><slot></slot></main>
  <footer>
    <!-- <a-row justify="space-between" class="container">
      <a-col :span="6" :xs="12">
        <div class="footer-title">关于我们</div>
        <div class="footer-item">用户协议</div>
        <div class="footer-item">隐私政策</div>
      </a-col>
      <a-col :span="6" :xs="12">
        <div class="footer-title">联系我们</div>
        <div class="footer-item">邮箱：1112969@qq.com</div>
        <div class="footer-item">商业合作</div>
      </a-col>
      <a-col :span="6" :xs="0">
        <div class="footer-title">加入我们</div>
        <div class="footer-item">邮箱</div>
      </a-col>
      <a-col :span="6" :xs="0">
        <div class="footer-title">社区</div>
        <div class="footer-item">Facebook</div>
        <div class="footer-item">Youtube</div>
        <div class="footer-item">Tiktok</div>
      </a-col>
      <a-col :xs="24" :sm="0">
        <a-flex justify="center" align="center" class="community">
          <div class="footer-title">社区</div>
          <div class="footer-item">Facebook</div>
          <div class="footer-item">Youtube</div>
          <div class="footer-item">Tiktok</div>
        </a-flex>
      </a-col>
    </a-row> -->
    <p class="company">© DramaBox, 版权所有&nbsp;&nbsp;STORYMATRIX PTE.LTD.</p>
  </footer>
</template>
<script setup lang="ts">
import { ref } from "vue"
import {
  SearchOutlined,
  GlobalOutlined,
  DownOutlined,
} from "@ant-design/icons-vue"
import { options } from "@/dictionaries/config"
import { configCurryFilter } from "@/dictionaries/filter"
const value = ref("")
const langValue = ref("zh")
onMounted(() => {
  langValue.value = localStorage.getItem("lang") || "zh"
})
function hangleLang(lang: string) {
  langValue.value = lang
  localStorage.setItem("lang", lang)
  window.location.reload()
}
</script>
<style lang="scss" scoped>
@media (min-width: 768px) {
  header {
    width: 100%;
    height: 66px;
    background: rgba(2, 2, 2, 0.85);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    color: #fff;
    .container {
      height: 100%;
      .nav-wrap {
        .logo {
          height: 100%;
          width: 150px;
        }
        nav {
          height: 100%;
          ul {
            height: 100%;
            display: flex;
            align-items: center;
            li {
              a {
                height: 100%;
                padding: 0.2rem 0.32rem;
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 0.18rem;
                color: hsla(0, 0%, 100%, 0.8);
                box-sizing: border-box;
                span {
                  display: inline-block;
                  padding: 0.08rem 0.1rem;
                  word-break: keep-all;
                  min-width: 1rem;
                  text-align: center;
                  font-size: 0.18rem;
                }
                &:hover {
                  color: #ff375f;
                  span {
                    background: rgba(73, 73, 78, 0.3);
                    border-radius: 0.04rem;
                  }
                }
              }
              .active {
                span {
                  color: #ff375f;
                }
              }
              .ant-dropdown-link {
                cursor: pointer;
                padding: 0 0.32rem;
                :deep(.ant-dropdown-menu-item) {
                  padding: 0.1rem 0.2rem;
                }
              }
            }
          }
        }
      }
      .search {
        display: flex;
        align-items: center;
        :deep(.ant-input-wrapper) {
          .ant-input {
            border-radius: 50px;
            border-start-end-radius: 0;
            border-end-end-radius: 0;
          }
          .ant-input-group-addon {
            border-radius: 50px;
            border-start-start-radius: 0;
            border-end-start-radius: 0;
            .ant-input-search-button {
              border-start-end-radius: 50px;
              border-end-end-radius: 50px;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  header {
    height: 0.88rem;
    width: 100%;
    background-color: #212121;
    padding: 0 0.12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.01rem solid #e2e2e3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .nav-wrap {
      height: 100%;
      width: 100%;
      .nav-menu {
        height: 100%;
        display: flex;
        align-items: center;
        li {
          position: relative;
          color: #ff375f;

          font-size: 0.32rem;
          height: 100%;
          display: flex;
          align-items: center;
          a {
            padding: 0 0.2rem 0 0.12rem;
            display: flex;
            align-items: center;
            color: #fff;
          }
        }
        .active {
          span {
            font-weight: 700;
            color: #ff375f;
          }
          &::after {
            content: "";
            left: 50%;
            transform: translateX(-50%);
            background-color: #ff375f;
            border-radius: 0.04rem;
            position: absolute;
            bottom: 0;
            height: 0.06rem;
            width: 0.4rem;
          }
        }
      }
      .nav-right {
        color: #fff;
        .search-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.4rem;
          width: 0.48rem;
          margin-right: 0.26rem;
          cursor: pointer;
        }
        .language-box {
          display: flex;
          font-size: 0.3rem;
          cursor: pointer;
          .anticon {
            margin-right: 0.1rem;
          }
        }
      }
    }
  }
}
footer {
  display: flex;
  position: relative;
  background: #1b1a1a;
  height: 2.2rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .container {
    .footer-title {
      font-size: 0.22rem;
      font-weight: 700;
      color: hsla(0, 0%, 100%, 0.8);
    }
    .footer-item {
      display: block;
      font-weight: 400;
      color: hsla(0, 0%, 100%, 0.6);
      transition: all 0.3s;
      font-size: 0.16rem;
      margin-top: 0.12rem;
    }
  }
  .company {
    margin-top: 0.2rem;
    font-size: 0.16rem;
    font-weight: 400;
    color: hsla(0, 0%, 100%, 0.6);
  }
}
@media (max-width: 768px) {
  footer {
    padding: 0.32rem 0.32rem 0.48rem;
    .container {
      .footer-title {
        font-weight: 700;
        font-size: 0.26rem;
        color: hsla(0, 0%, 100%, 0.6);
        line-height: 0.32rem;
      }
      .footer-item {
        font-size: 0.24rem;
        color: hsla(0, 0%, 100%, 0.4);
        line-height: 0.3rem;
        text-decoration: underline !important;
      }
      .community {
        .footer-title {
          font-weight: 500;
          margin-right: 0.1rem;
        }
      }
    }
  }
}
.lang-menu {
  background-color: #fff;
  border-radius: 0.1rem;
  padding: 0.03rem 0;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  li {
    padding: 0.1rem 0.2rem;
  }
}
</style>
